<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>豆瓣电影</title>
</head>

<style>
    /* --display:inline-block: 使元素以内联块的形式显示，即元素会像块级元素一样占据空间，但不会独占一行-- */

    .pic { display:inline-block; width:130px; vertical-align:top; margin:10px; }
    .info { display:inline-block; }
    .liclass { list-style: none; margin:20px; }
    .title { margin: 10px; font-size: 18px; }
    .point { margin:10px; color:red; }
    .attrs { margin:10px; color: #666; }
    h3 { display:inline-block; }
    .pl { color:#888; }
    .native { font-size:10px; }
    .nickname { font-size:10px; }
    .directors { font-size:10px; }
    .actors { font-size:10px; }
    .others { font-size:10px; }
    .link { border:1px solid; }
    a:link { color: blue; text-decoration: none; }
    a:visited { color: blue; text-decoration: none; }
</style>

<body>
    <div class="pic">
        <img width="100" src="/images/001.jpg">
    </div>

    <div class="info">
        <div class="title">
            <h3 style="display:inline-block">肖申克的救赎</h3>&nbsp;&nbsp;
            <span class="point">9.6分</span>
        </div>

        <div class="native">
            <span class="pl">原名：</span><span class="attrs">The Shawshank Redemption</span>
        </div>

        <div class="nickname">
            <span class="pl">别名：</span><span class="attrs">月黑高飞(港) / 刺激1995(台)</span>
        </div>

        <div class="directors">
            <span class="pl">导演：</span><span class="attrs">弗兰克·德拉邦特 Frank Darabont</span>
        </div>

        <div class="actors">
            <span class="pl">主演：</span><span class="attrs">蒂姆·罗宾斯 Tim Robbins / ...</span>
        </div>

        <div class="others">
            <span class="pl">时间：</span><span class="attrs">1994</span><br>
            <span class="pl">国家/地区：</span><span class="attrs">美国</span><br>
            <span class="pl">类型：</span><span class="attrs">犯罪 剧情</span><br>
            <span class="pl">评价：</span><span class="attrs">9.6</span>
        </div>
    </div>
</body>
</html>
